<hr>
<p>title: npm + webpack + vue 创建发布一个组件<br>date: 2018-10-27 11:04:34<br>tags:</p>
<ul>
<li>npm</li>
<li>vue</li>
<li>webpack</li>
</ul>
<hr>
<p>做一个npm上创建发布vue组件的例子</p>
<h4 id="环境准备"><a href="#环境准备" class="headerlink" title="环境准备"></a>环境准备</h4><ol>
<li>需要安装<code>nodejs</code></li>
<li><p>需要配置<code>npm</code>地址,我这里配置的是私有仓库地址(当然你也可以配置其他仓库的):</p>
<pre><code>registry = &quot;http://192.168.17.18:7001/&quot;
</code></pre></li>
</ol>
<h4 id="项目初始化"><a href="#项目初始化" class="headerlink" title="项目初始化"></a>项目初始化</h4><p>因为我们创建的是一个vue组件,用不着复杂的打包,所以我们这里使用<code>webpack-simple</code>来初始化项目,非常简单.</p>
<ol>
<li>首先我们这里创建一个 vue_demo组件</li>
</ol>
<pre><code>
F:\npm&gt;vue init webpack-simple vue_demo

  A newer version of vue-cli is available.

  latest:    2.9.6
  installed: 2.9.3

? Project name vue_demo
? Project description A Vue.js project
? Author cyshigehaohaizi &lt;cyshigehaohaizi@163.com&gt;
? License MIT
? Use sass? Yes

   vue-cli · Generated &quot;vue_demo&quot;.

   To get started:

     cd vue_demo
     npm install
     npm run dev


F:\npm&gt;

</code></pre><ol start="2">
<li>然后在目录下我们可以看到<code>vue_demo</code>文件夹:</li>
</ol>
<pre><code>│  .babelrc
│  .editorconfig
│  .gitignore
│  index.html
│  package.json
│  README.md
│  webpack.config.js
│
│
└─src
    │  App.vue
    │  main.js
    │
    └─assets
            logo.png
</code></pre><ol start="3">
<li>初始化项目,在目录下运行<code>npm install</code></li>
</ol>
<pre><code>F:\npm\vue_demo&gt;npm install

</code></pre><ol start="4">
<li>通过<code>README</code>文档可以看到启动的脚本</li>
</ol>
<pre><code># install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

</code></pre><p>我们启动测试下:</p>
<pre><code>F:\npm\vue_demo&gt;npm run dev

&gt; vue_demo@1.0.0 dev F:\npm\vue_demo
&gt; cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
</code></pre><p>启动成功! 访问:<a href="http://localhost:8080/">http://localhost:8080/</a><br>可以看到我们生成的vue页面!接下来我们来写组件.</p>
<h4 id="组件书写并发布"><a href="#组件书写并发布" class="headerlink" title="组件书写并发布"></a>组件书写并发布</h4><p>我这里封装一个简单的输入框<code>simpleText</code></p>
<ol>
<li>文件目录如下:<br>这里我们把组件放在<code>src/simpleText</code>中:</li>
</ol>
<pre><code>-src             //源目录
   │  App.vue    //测试页面入口文件
   │  main.js    //测试页面vue文件
   │
   ├─assets      //资源
   │      logo.png
   │
   └─simpleText  //组件目录
       │  index.js //组件入口文件
       │
       └─src    //组件源目录
               simpleText.vue //vue组件
-index.html     //测试入口html文件
</code></pre><ol start="2">
<li>组件书写</li>
</ol>
<ul>
<li>组件功能书写:<code>simpleText/src/simpleText.vue</code></li>
</ul>
<pre><code>&lt;template&gt;
   &lt;span class=&quot;simple-text&quot;&gt;
       &lt;span v-if=&quot;label!=&apos;&apos;?true:false&quot;&gt;{{label}}&lt;/span&gt;
       &lt;input type=&quot;text&quot; :value=&quot;text&quot; @input=&quot;changeValue($event.target.value)&quot;&gt;
   &lt;/span&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name: &quot;simple-text&quot;,
    props: {
      value: {
        type: String,
        default: &apos;&apos;
      },
      label: {
        type: String,
        default: &apos;&apos;
      }
    },
    data() {
      return {
        text: this.value,
      }
    },
    methods: {
      changeValue(value) {
        this.text = value;
        this.$emit(&apos;update:value&apos;,this.text);
      }
    }

  }
&lt;/script&gt;

&lt;style scoped lang=&quot;scss&quot; type=&quot;text/scss&quot;&gt;
  .simple-text {
    input {
      outline-color:darkturquoise ;
      border-radius: 4px;
      border: 1px solid #cccc;
      padding: 4px 6px;
      margin-right: 4px;

    }
  }
&lt;/style&gt;

</code></pre><ul>
<li>实现组件的install方法并export组件:<code>simpleText/index.js</code></li>
</ul>
<pre><code>import simpleText from &apos;./src/simpleText&apos; // 导入组件
//实现组件的install方法
simpleText.install = (Vue, options) =&gt; {
  // simpleText.name 组件的name属性
  Vue.component(simpleText.name, simpleText)
}
export default simpleText // 导出组件

</code></pre><ol start="3">
<li>配置组件<code>webpack</code>的测试环境以及打包环境,我这里只贴出主要配置:<code>webpack.config.js</code></li>
</ol>
<pre><code>var config={
  //配置开发测试入口以及出口文件名称
  dev:{
    entry: &apos;./src/main.js&apos;,
    filename:&apos;build.js&apos;
  },
  //配置打包入口以及出口文件名称
  build:{
    entry: &apos;./src/simpleText/index.js&apos;,
    filename: &apos;simple-text.js&apos;
  }

}

module.exports = {
  entry: process.env.NODE_ENV==&quot;development&quot;?config.dev.entry:config.build.entry,
  output: {
    path: path.resolve(__dirname, &apos;./dist&apos;),
    publicPath: &apos;/dist/&apos;,
    filename: process.env.NODE_ENV==&quot;development&quot;?config.dev.filename:config.build.filename,
    // library指定的就是你使用require时的模块名
    library: &apos;simpleText&apos;,
    libraryTarget: &apos;umd&apos;,

  },
  ...
}
</code></pre><ol start="4">
<li><p>测试组件</p>
<ul>
<li>引入组件:<code>main.js</code></li>
</ul>
<p><code>`</code><br>import Vue from ‘vue’<br>import App from ‘./App.vue’</p>
</li>
</ol>
<p>  //引入没有打包的simpleText组件测试<br>  // import simpleText from ‘./simpleText/index.js’<br>  //引入打包好(npm run build)的simpleText组件测试<br>  import simpleText from ‘../dist/simple-text’</p>
<p>  //注册插件搭配Vue上<br>  Vue.use(simpleText);</p>
<p>  new Vue({<br>    el: ‘#app’,<br>    render: h =&gt; h(App)<br>  })</p>
<pre><code>
- 使用组件 :`app.vue`

</code></pre><p>  <template><br>    <div id="app"><br>      <img src="./assets/logo.png"><br>      <h1>{{ msg }}</h1><br>      <simple-text label="simpleText" :value.sync="value"></simple-text><br>      <br/><br>      输入值:<br>      {{value}}<br>    </div><br>  </template><br>  <script><br>    export default {<br>      name: ‘app’,<br>      data() {<br>        return {<br>          msg: ‘这个是我的simpleText测试组件’,<br>          value: ‘text value’<br>        }<br>      }<br>    }<br>  </script></p>
<pre><code>
- 运行测试 :`npm run dev`

</code></pre><p>   F:\npm\vue_demo&gt;npm run dev</p>
<blockquote>
<p><a href="mailto:vue_demo@1.0.0">vue_demo@1.0.0</a> dev F:\npm\vue_demo<br>cross-env NODE_ENV=development webpack-dev-server –open –hot</p>
</blockquote>
<p>   Project is running at <a href="http://localhost:8080/">http://localhost:8080/</a><br>   webpack output is served from /dist/<br>   404s will fallback to /index.html</p>
<pre><code>   访问:http://localhost:8080/

   ![图片](./npm组件发布/1.png)

5. 打包组件 :

</code></pre><p>F:\npm\vue_demo&gt;npm run build</p>
<blockquote>
<p><a href="mailto:vue_demo@1.0.0">vue_demo@1.0.0</a> build F:\npm\vue_demo<br>cross-env NODE_ENV=production webpack –progress –hide-modules</p>
</blockquote>
<p>Hash: 8d907091c438ffae8acf<br>Version: webpack 3.12.0<br>Time: 1928ms<br>             Asset     Size  Chunks             Chunk Names<br>    simple-text.js  6.13 kB       0  [emitted]  main<br>simple-text.js.map  51.8 kB       0  [emitted]  main</p>
<p>F:\npm\vue_demo&gt;</p>
<pre><code>6. 发布组件

- 修改`package.json`文件:

</code></pre><p>  “name”: “@yh/simple-text”,//注意如果是私有仓库一定要指明名称,我这里在@yh下<br>  “description”: “A Vue.js project”,<br>  “version”: “1.0.0”,//版本号<br>  “author”: “cyshigehaohaizi <a href="mailto:&#99;&#x79;&#115;&#104;&#x69;&#x67;&#x65;&#104;&#x61;&#x6f;&#104;&#x61;&#x69;&#x7a;&#105;&#x40;&#49;&#54;&#x33;&#x2e;&#99;&#111;&#x6d;">&#99;&#x79;&#115;&#104;&#x69;&#x67;&#x65;&#104;&#x61;&#x6f;&#104;&#x61;&#x69;&#x7a;&#105;&#x40;&#49;&#54;&#x33;&#x2e;&#99;&#111;&#x6d;</a>“,<br>  “license”: “MIT”,//许可证<br>  “private”: false,//改为false<br>  “main”:”dist/simple-text.js”,//直接使用import simpleText 就可以获取到simple-text.js<br>     “directories”: {<br>       “dist”: “dist”<br>     },<br>    “repository”: {<br>      “type”: “git”,<br>      “url”: “<a href="http://192.168.17.18:7001/&quot;//这个是配置的仓库地址,我这里配置的是公司的私有仓库">http://192.168.17.18:7001/&quot;//这个是配置的仓库地址,我这里配置的是公司的私有仓库</a><br>    }</p>
<pre><code>
- 注册 npm 并添加用户:

</code></pre><p>npm adduser<br>Username: your name<br>Password: your password<br>Email: <a href="mailto:yourmail@xx.com">yourmail@xx.com</a></p>
<pre><code>
- 登陆npm账号:`npm login`

</code></pre><p>F:\npm\vue_demo&gt;npm login  #登陆npm账号<br>Username: your name<br>Password: your password<br>Email: <a href="mailto:yourmail@xx.com">yourmail@xx.com</a><br>Logged in as your name on <a href="http://192.168.17.18:7001/">http://192.168.17.18:7001/</a>.</p>
<pre><code>
- 发布:`npm publish`

</code></pre><p>F:\npm\vue_demo&gt;npm publish</p>
<ul>
<li>@<a href="mailto:yh/simple-text@1.0.0">yh/simple-text@1.0.0</a></li>
</ul>
<pre><code>
#### 组件下载使用

- 这里我们在新一个测试项目,在目录下下载我们的组件:`npm install @yh/simple-text`

</code></pre><p>F:\vue_pro&gt;cd ta404-ui-cli</p>
<p>F:\vue_pro\ta404-ui-cli&gt;npm install @yh/simple-text<br>npm WARN <a href="mailto:ajv-keywords@3.1.0">ajv-keywords@3.1.0</a> requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.<br>npm WARN <a href="mailto:eslint-config-vue@2.0.2">eslint-config-vue@2.0.2</a> requires a peer of eslint@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.<br>npm WARN <a href="mailto:eslint-config-vue@2.0.2">eslint-config-vue@2.0.2</a> requires a peer of eslint-plugin-vue@^1.0.0 || ^2.0.0 but none is installed. You must install peer dependencies yourself.<br>npm WARN <a href="mailto:eslint-plugin-vue@4.7.0">eslint-plugin-vue@4.7.0</a> requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.<br>npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="mailto:fsevents@1.2.4">fsevents@1.2.4</a> (node_modules\fsevents):<br>npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="mailto:fsevents@1.2.4">fsevents@1.2.4</a>: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})</p>
<ul>
<li>@<a href="mailto:yh/simple-text@1.0.0">yh/simple-text@1.0.0</a><br>added 2 packages in 34.026s</li>
</ul>
<pre><code>
- 使用这个组件:

``

</code></pre><p>//simpleTextDemo.js</p>
<p>import Vue from ‘vue’;<br>import simpleTextDemo from ‘./simpleTextDemo.vue’</p>
<p>import simpleText from ‘@yh/simple-text’//引入simpleText插件<br>Vue.use(simpleText);//注册插件</p>
<p>new Vue({<br>   render: h =&gt; h(simpleTextDemo)<br>}).$mount(‘#app’);</p>
<pre><code>
</code></pre><p>//simpleTextDemo.vue</p>
<p><template><br>  <div id="app"><br>    <h1>组件测试simpleText</h1><br>    <simple-text label="simpleText" :value.sync="value"></simple-text><br>    <br><br>    输入的值:<br>    {{value}}<br>  </div><br></template></p>
<script>

  export default {
    name: 'simpleTextDemo',
    data() {
      return {
        value: "测试"
      }
    },
  }
</script>

<p><code>`</code></p>
<p>启动测试正常:<br>  <img src="./npm组件发布/2.png" alt="图片"></p>
